<template>
	<div id="main_container">
		<div class="info_container">
			<div class="info_image">
				<my-image class="image" type="buildings" :icon="build.iconUrl" :size="200"></my-image>
			</div>
			<div class="info_content">
				<h1 class="info_title">{{build.name}}</h1>
				<el-divider></el-divider>
				<el-descriptions class="description" :column="3" border>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-office-building"></i>
							建筑名称
						</template>
						{{ build.name }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-menu"></i>
							建筑类型
						</template>
						{{ build.type }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-lightning"></i>
							电力消耗
						</template>
						{{ build.power }} MW
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-document"></i>
							描述
						</template>
						{{ build.description }}
					</el-descriptions-item>
				</el-descriptions>
				<div class="costs_container">
					<h3>建造材料</h3>
					<div class="costs_list">
						<div v-for="(cost, index) in build.costs" :key="index" class="cost_item"
							@click="gotoItem(cost.id)">
							<my-image type="items" :icon="cost.iconUrl" :size="40"></my-image>
							<span class="cost_text">{{ cost.name }} ×{{ cost.amount }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="recipe_container">
			<!-- 移除了 el-tabs 标签，直接显示配方内容 -->
			<h3>可制作配方</h3>
			<el-divider></el-divider>
			<div class="table">
				<recipe-show v-for="recipe in recipes" :key="recipe.id" :recipe="recipe" class="show"></recipe-show>
				<div class="no-recipes" v-if=" !recipes || recipes.length == 0">暂无可制作配方</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	import RecipeShow from "@/components/RecipeShow.vue";

	export default {
		name: "BuildInfo",
		components: {
			MyImage,
			RecipeShow
		},
		data() {
			return {
				build: {
					costs: []
				},
				recipes: [],
				loading: {}
			}
		},
		watch: {
			"$route.query.id": {
				immediate: true,
				handler(newId) {
					if (newId) {
						this.loadBuildDetail(newId);
					}
				}
			}
		},
		methods: {
			loadBuildDetail(id) {
				this.$api.get("/build/detail/" + id).then((res) => {
					this.build = res.data.build;
					this.recipes = res.data.recipe.filter(recipe =>
						recipe.buildings.some(b => b.id === this.build.id)
					);
				})
			},
			gotoItem(item) {
				this.$router.push({
					path: "/item/info?id=" + item
				});
			},
		},
		mounted() {
			this.$version.addListener("BuildInfo", () => {
				this.$router.push({
					path: "/build"
				});
			})
		},
		destroyed() {
			this.$version.removeListener("BuildInfo");
		}
	}
</script>

<style lang="less" scoped>
	@import "@/assets/less/variables.less";

	#main_container {
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: @color-disabled;

		h1,
		h3 {
			margin: 0 0 10px;
			color: @color-text;
			font-weight: 600;
		}

		h1 {
			font-size: 24px;
		}

		h3 {
			font-size: 18px;
		}

		.info_container {
			width: 90%;
			background-color: white;
			margin: 10px auto;
			border-radius: 10px;
			padding: 20px;
			border: 1px solid #cccece;
			display: flex;
			justify-content: space-around;

			.info_content {
				width: calc(100% - 300px);

				.costs_container {
					margin-top: 20px;

					.costs_list {
						display: flex;
						flex-wrap: wrap;
						gap: 15px;

						.cost_item {
							display: flex;
							align-items: center;
							padding: 8px 12px;
							background: @color-disabled;
							border-radius: 4px;

							.cost_text {
								margin-left: 8px;
								font-size: 14px;
							}
						}
					}
				}
			}
		}

		.recipe_container {
			width: 90%;
			background-color: white;
			margin: 10px auto;
			border-radius: 10px;
			padding: 20px;
			border: 1px solid #cccece;

			/* 可以添加标题样式 */
			h3 {
				margin: 0 0 15px;
				color: @color-text;
				font-size: 20px;
				font-weight: 600;
			}

			.show {
				width: 90%;
				background-color: white;
				margin: 10px auto;
				border-radius: 10px;
				padding: 20px;
				border: 1px solid #cccece;
			}

			.no-recipes {
				font-size: 30px;
				width: 100%;
				height: 100%;
				padding: 20px;
				color: @color-subtext;
			}
		}
	}
</style>